<template>
	<!-- 辅助线 -->
	<view>
		<view class="lines" :style="[boxStyle]">
			<view class="item" :style="[lineStyle]"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'guide',
	props: {
		dataConfig: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		//最外层盒子的样式
		boxStyle() {
			return {
				background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
				margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' + ' ' + 0
			};
		},
		//线条样式
		lineStyle() {
			return {
				borderBottomWidth: this.dataConfig.heightConfig.val + 'px',
				borderBottomColor: this.dataConfig.lineColor.color[0].item,
				borderBottomStyle: this.dataConfig.lineStyle.list[this.dataConfig.lineStyle.tabVal].style
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.lines {
	padding: 0 20rpx;

	.item {
		width: 100%;
		box-sizing: border-box;
		border-bottom-color: #666;
		border-bottom-width: 1px;
		border-bottom-style: dotted;
	}
}
</style>
